<template>
    <div>
        <Title :title="title"></Title>
        <!-- 提供饼图容器 -->
        <div ref="left2" style="height: 150px;"></div>
    </div>
</template>
<script setup>
import Title from './Title.vue';
import { ref, onMounted } from 'vue';
<<<<<<< HEAD
// 引入饼图构造函数 
import {get}from'@/utils/request';
import { Pie } from '@antv/g2plot';
const left2 = ref(null);
const title = ref('设备状态分布');
const EmpData=ref([])
const loadPie = () => {
    const data = [
        { type: '在线', value: 5 },
        { type: '离线', value: 4 },
    ];

=======
import { get } from '@/utils/request';
// 引入饼图构造函数 
import { Pie } from '@antv/g2plot';
const left2 = ref(null);
const title = ref('设备状态分布');
// 声明存放设备数组
const EmpData = ref([]);

const loadPie = () => {
    
>>>>>>> 1710512daa66ff8561fed39cf79c33e401758b5e
    const piePlot = new Pie(left2.value, {
        appendPadding: 10,
        data:EmpData.value,
        angleField: 'value',
        colorField: 'type',
        radius: 0.8,
        label: {
            style: {
                fill: 'white'
            },
            type: 'outer',
            content: '{name}{value}个',
        },
        // 图例
        legend: {
            itemName: {
                style: {
                    fill: 'white'
                }
            }
        },
        // 设置饼图主题色
        color: ({ type }) => {
            if (type === '在线') {
                return '#a2a6ec';
            }
            return 'pink';
        },
        interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
    });

    piePlot.render();
}
<<<<<<< HEAD
const getEmpData = async()=>{
    let res =await get('/dashboard/queryDeviceOnlineNumber')
    console.log(res,'------')
    EmpData.value=res.data;
}
onMounted(async() => {
    await getEmpData();
    loadPie()
=======
// 封装查询设备的函数 
const getEmpData = async () => {
    let res = await get('/dashboard/queryDeviceOnlineNumber');//axios 
    // console.log(res, '-----');
    EmpData.value = res.data;
}
onMounted(async () => {
    await getEmpData();
    loadPie();
>>>>>>> 1710512daa66ff8561fed39cf79c33e401758b5e
})
</script>
<style lang="less" scoped></style>